 <template>
    <view class="personal">
        <view class="hearder" :style="{ paddingTop: statusBarHeight + 'px' }">
            <view class="h-88 ph-32 f ai-c jc-s-b" @click="back">
                <image src="http://cwht.ricecs.cn/app/shop/back-b.png" class="w-32 h-32"></image>
            </view>
        </view>
        <image
            :src="getBaseUrl() + '/admin-api/system/file/19/get/6bdc2cfae77c5ddd80820fdf6d472a08a9eac652fc1005f59f000466d81833df.png'"
            class="w-f h-400"
        ></image>
        <view class="content b-24 w-f ph-32 pb-20">
            <view class="w-194 h-194 b-194 ava">
                <image :src="userInfo.avatar" class="w-194 h-194 b-194"></image>
            </view>
            <view class="f jc-f-e">
                <view class="w-160 h-64 b-8 fs-26 fw-500 text-color4 f ai-c jc-c edit mt-32" @click="toPersonalEdit">编辑资料</view>
            </view>
            <view class="fs-44 fw-600 mt-33 text-color1">{{ userInfo.nickname?userInfo.nickname:userInfo.mobile }}</view>
            <view class="fs-26 mt-4 text-color4">ID：{{userInfo.id}}</view>
            <view class="fs-26 text-color3 mt-20">{{userInfo.introduction?userInfo.introduction:'这个人很懒，什么也没留下'}}</view>
            <view class="f mt-12 tag">
                <view class="fs-20 h-28 ph-6 f ai-c mr-14" v-if='userInfo.city'>{{userInfo.city}}</view>
                <view class="fs-20 h-28 ph-6 f ai-c" v-if='userInfo.age'>{{userInfo.age||0}}岁</view>
            </view>
            <view class="f mt-32">
                <view class="w-130 mr-64 f fd-c ai-c">
                    <view class="fs-36 fw-600 text-color4">{{fenList.fansCount}}</view>
                    <view class="mt-4 fs-26 text-color3">粉丝</view>
                </view>
                <view class="w-130 mr-64 f fd-c ai-c">
                    <view class="fs-36 fw-600 text-color4">{{fenList.followCount}}</view>
                    <view class="mt-4 fs-26 text-color3">关注</view>
                </view>
                <view class="w-130 mr-64 f fd-c ai-c" @click='show=true'>
                    <view class="fs-36 fw-600 text-color4">{{fenList.likedCount}}</view>
                    <view class="mt-4 fs-26 text-color3">获赞</view>
                </view>
            </view>
        </view>

        <view class="content b-24 w-f ph-32 mt-20 pv-32 su"  v-if='list.length>0'>
            <view class="f mb-32" v-for="(item, index) in list" :key="index" @click="toDetail(item)">
                <view class="yuan w-16 h-16 b-16 mr-32"></view>
                <view class="f fd-c f1 list pb-33">
                    <view class="fs-30 text-color4">2023年/10/18</view>
                    <view class="fs-32 fw-600 mt-12 text-color4">{{ item.title }}</view>
                    <view class="fs-28 text-color4 mt-8" style="word-break:break-all;"> {{ item.content }}</view>
                    <image :src="item.img" class="w-360 b-12 mt-16" mode="widthFix"  v-if="item.img"></image>
                    <video
                        :src="item.videoUrl"
                        v-show="item.videoUrl"
                        class="w-360 b-12"
                        mode="widthFix"
                        object-fit="fill"
                        :controls="false"
                        :show-center-play-btn="false"
						v-if="item.videoUrl"
                    ></video>
					<!-- v-show="item.commentCount != 0" -->
                    <view class="comment w-f ph-24 pv-24"  style="margin-top: 10rpx;">
                        <view class="mb-8" v-for="(value,key) in item.comment" :key="key" >
                            <text class="fs-28 text-color3">{{value.memberNickname}}：</text>
                            <text class="fs-28 text-color4" style="word-break:break-all;">{{value.commentContent}}</text>
                        </view>
                                   
                        <view class="fs-28 text-color3 mt-8">共{{ item.commentCount }}条评论</view>
                    </view>
                    <view class="f ai-c jc-f-e w-f mt-32">
                        <view
                            class="f ai-c ml-40 fs-28 fw-600"
                            :class="item.followEnabled ? 'text-color' : 'text-color4'"
                            @click.stop="handleFollow(item, index)"
                        >
                            <image src="http://cwht.ricecs.cn/app/novice/collect.png" class="w-40 h-40 mr-12"></image>
                            {{ item.followCount }}
                        </view>
                        <view class="f ai-c ml-40 fs-28 fw-600 text-color4">
                            <image src="http://cwht.ricecs.cn/app/novice/comment.png" class="w-40 h-40 mr-12"></image>
                            {{ item.commentCount }}
                        </view>
                        <view class="f ai-c ml-40 fs-28 fw-600" :class="item.likeEnabled ? 'text-color' : 'text-color4'" @click.stop="handleZan(item, index)">
                            <image src="http://cwht.ricecs.cn/app/novice/zan.png" class="w-40 h-40 mr-12"></image>
                            {{ item.likeCount }}
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
    <u-overlay :show="show" @click="show = false">
        <view class="w-f f ai-c jc-c overlay">
            <view class="w-540 h-456 f fd-c ai-c jc-c zan-box b-24">
                <image
                    :src="getBaseUrl() + '/admin-api/system/file/19/get/ad95c29322bf2db83c16823c9e69e03857044d303eef01c0cbcb8ae34a96fee0.png'"
                    class="w-200 h-200"
                ></image>
                <view class="fs-28 text-color4 mt-32">共获得 {{fenList.likedCount}} 个赞</view>
                <view class="fs-32 fw-600 mt-66 text-color">我知道了</view>
            </view>
        </view>
    </u-overlay>
</template>
<script setup lang="ts">
import { ref,getCurrentInstance } from 'vue';
import { onShow, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
import { useAuthStore } from '@/store/modules/auth';
import { myFenCount } from '@/services/api/mine/index';

import { getBaseUrl } from '@/utils/env';
import { myPage, commentGet, likeIncrese, likeDecrese, followIncrese, followDecrese } from '@/services/api/novice';
const authStore = useAuthStore();
const show = ref(false);
const userInfo = ref();
const list = ref<any[]>([]);
const { proxy } = getCurrentInstance();
const listParams = ref<any>({
    pageNo: 1,
    pageSize: 10,
    userId: authStore.getUserId,
});
const fenList = ref<any[]>([]);
onShow(async () => {
    await authStore.getUserInfos();
    userInfo.value = authStore.getUserInfo;
    list.value = [];
    listParams.value.pageNo = 1;
	
     getList();
     getFen();
});
//关注
async function handleFollow(item: any, index: number) {
    if (item.followEnabled) {
        await followIncrese({ id: item.id });
        list.value[index].followCount = list.value[index].followCount - 1;
    } else {
        await followDecrese({ id: item.id });
        list.value[index].followCount = list.value[index].followCount + 1;
    }
    list.value[index].followEnabled = !list.value[index].followEnabled;
}
//赞
async function handleZan(item: any, index: number) {
    if (!item.likeEnabled) {
        await likeIncrese({ id: item.id });
        list.value[index].likeCount = list.value[index].likeCount + 1;
    } else {
        await likeDecrese({ id: item.id });
        list.value[index].likeCount = list.value[index].likeCount - 1;
    }
    list.value[index].likeEnabled = !list.value[index].likeEnabled;
}
//详情
function toDetail(item: any) {
    if (item.urls) {
        uni.navigateTo({
            url: `/pages_novice/trendsDetail?id=${item.id}`,
        });
    } else {
        uni.navigateTo({
            url: ` /pages_novice/videoDetail?id=${item.id}`,
        });
    }
}
//下拉刷新
onPullDownRefresh(() => {
    list.value = [];
    listParams.value.pageNo = 1;
    getList();
});
//上拉加载
onReachBottom(() => {
    listParams.value.pageNo++;
    getList();
});
//获取动态
async function getList() {
    const { data } = await myPage(listParams.value);
    uni.stopPullDownRefresh();
    data.list.forEach(async(item: any) => {
        if (item.urls) {
            item.img = item.urls.split(',')[0];
						 item.createTime = proxy.$moment(item.createTime).format('YYYY.MM.DD HH:mm:ss');
        }
		let res = await commentGet({ contentId: item.id });
					item.comment = res.data
					list.value.push(item);
    });
    list.value = list.value.concat(data.list);
}
//获取粉丝总数
async function getFen() {
	const { data } = await myFenCount({userId:userInfo.value.id});
	fenList.value  = data

   
}
function toPersonalEdit() {
    uni.navigateTo({
        url: '/pages_mine/personalEdit',
    });
}
function back() {
    uni.navigateBack();
}
//头部
const systemInfo = uni.getSystemInfoSync();
const statusBarHeight = systemInfo.statusBarHeight;
</script>
<style lang="scss" scoped>
.zan-box {
    background-image: linear-gradient(180deg, #fff5e0 0%, #ffffff 100%);
}
.overlay {
    height: 100vh;
}
.personal {
    background: #f5f5f5;
    min-height: 100vh;

    .su::after {
        position: absolute;
        top: 32rpx;
        left: 39rpx;
        content: '';
        width: 1px;
        height: 90%;
        background: #dddddd;
    }
    .content {
        background: #fff;
        position: relative;
        top: -32rpx;
        .comment {
            background: #f8f8f8;
        }
        .list {
            border-bottom: 1px solid #f5f5f5;
        }
        .yuan {
            background: #cccccc;
            position: relative;
            top: 10rpx;
            z-index: 11;
        }
        .tag {
            view {
                color: #5769a0;
                background: #f0f2f5;
            }
        }
        .edit {
            border: 2rpx solid #dddddd;
        }
        .ava {
            position: absolute;
            left: 32rpx;
            top: -97rpx;
            background: #d9d9d9;
            border: 3rpx solid #ffffff;
        }
    }
    .hearder {
        position: fixed;
        width: 100%;
        left: 0;
        top: 0;
    }
}
</style>
